<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">

		<h:form id="TravelReimbursement">
			<p:growl></p:growl>
			<h:outputText value="Create Travel Reimbursement "
				styleClass="outputTextTitle" />

			<h:panelGrid style="width: 100%">

				<p:panel style="width: 100%">
					<h:outputText value="Traveller Details"
						styleClass="outputTextSubTitle" />
					<h:panelGrid columns="6" cellspacing="7"
						columnClasses="travelExpenseGridLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText"
						style="margin-left: -7px; width: 100%">
						<h:outputLabel value="#{msg['employeename.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.wamUser.employee.firstName} #{createTravelReimbursementBean.wamUser.employee.lastName}" />

						<h:outputLabel value="Employee Code" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.wamUser.employee.employeeCode}" />

						<h:outputLabel value="#{msg['dept.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.wamUser.employee.moduleName}" />

						<h:outputLabel value="#{msg['designation.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.wamUser.employee.designation}" />

						<h:outputLabel value="#{msg['requestdate.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.requestDate}">
							<f:convertDateTime pattern="dd-MMM-yyyy HH:mm a"
								timeZone="#{createTravelReimbursementBean.timeZone}" />
						</h:outputLabel>

						<h:outputLabel value="#{msg['place.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.wamUser.employee.location}" />

						<h:outputLabel value="#{msg['contactno.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.wamUser.employee.telephone}" />

						<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.wamUser.employee.telephone}" />

					</h:panelGrid>

					<h:outputText value="Travel Details"
						styleClass="outputTextSubTitle" />
					<h:panelGrid cellspacing="7" columns="6"
						columnClasses="employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText, employeeDetailLabel,gridCellMiddleLeftAligned, employeeDetailText"
						style="margin-left: -7px; width: 100%;">
						<h:outputLabel value="Expense Code" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.travelExpenseCode}"
							style="font-weight: bold;" />

						<h:outputLabel value="Purpose of travel" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.travelRequest.natureOfWork}" />


						<h:outputLabel value="Travel From " />
						<h:outputLabel value=":" />
						<h:panelGroup>
							<h:outputText
								value="#{createTravelReimbursementBean.travelRequest.travelFrom_DO}"
								rendered="#{createTravelReimbursementBean.travelRequest.travelType eq 'DOMESTIC'}" />
							<h:outputText
								value="#{createTravelReimbursementBean.travelRequest.travelFrom_OS}"
								rendered="#{createTravelReimbursementBean.travelRequest.travelType eq 'OVERSEAS'}" />
							<h:outputText
								value="#{createTravelReimbursementBean.travelRequest.travelFrom_DO}"
								rendered="#{createTravelReimbursementBean.travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}" />
						</h:panelGroup>

						<h:outputLabel value="Travel To " />
						<h:outputLabel value=":" />
						<h:panelGroup>
							<h:outputText
								value="#{createTravelReimbursementBean.travelRequest.travelTo_DO}"
								rendered="#{createTravelReimbursementBean.travelRequest.travelType eq 'DOMESTIC'}" />
							<h:outputText
								value="#{createTravelReimbursementBean.travelRequest.travelTo_OS}"
								rendered="#{createTravelReimbursementBean.travelRequest.travelType eq 'OVERSEAS'}" />
							<h:outputText
								value="#{createTravelReimbursementBean.travelRequest.travelTo_OS}"
								rendered="#{createTravelReimbursementBean.travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}" />
						</h:panelGroup>

						<h:outputLabel value="From Date" />
						<h:outputLabel value=":" />
						<h:outputText
							value="#{createTravelReimbursementBean.travelRequest.periodFrom}">
							<f:convertDateTime pattern="dd-MMM-yyyy"
								timeZone="#{createTravelReimbursementBean.timeZone}" />
						</h:outputText>

						<h:outputLabel value="To date" />
						<h:outputLabel value=":" />
						<h:outputText
							value="#{createTravelReimbursementBean.travelRequest.periodTo}">
							<f:convertDateTime pattern="dd-MMM-yyyy"
								timeZone="#{createTravelReimbursementBean.timeZone}" />
						</h:outputText>

						<h:outputLabel value="Client Name" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.travelRequest.client}" />

						<h:outputLabel value="Location" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.travelRequest.clientLocation}" />

						<h:outputLabel value="Recommended By" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.travelRequest.approver.firstName} #{createTravelReimbursementBean.travelRequest.approver.lastName}" />

						<h:outputLabel value="Approved By" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelReimbursementBean.employeeVP.firstName} #{createTravelReimbursementBean.employeeVP.lastName}" />

					</h:panelGrid>
				</p:panel>
				<p:panel>
					<h:panelGrid columns="2"
						columnClasses="gridCellBottomLeftAligned, gridCellBottomRightAligned"
						style="width: 100%; border-bottom: 1px solid #d9d9d9; padding-top: 5px;">
						<h:outputText value="Travel Expenses"
							styleClass="outputTextSubTitle" />
						<p:commandButton icon="ui-icon ui-icon-plus"
							value="Add new expense" title="Add new expense" style=""
							rendered="#{not createTravelReimbursementBean.SHOW_NEW_EXPENSE_FORM}"
							actionListener="#{createTravelReimbursementBean.showNewExpenseForm}"
							update="@form" />
						<h:panelGroup
							rendered="#{createTravelReimbursementBean.SHOW_NEW_EXPENSE_FORM}">
							<p:commandButton icon="ui-icon ui-icon-check"
								actionListener="#{createTravelReimbursementBean.addAction}"
								update="@form" title="Add expense details">
							</p:commandButton>
							<p:commandButton icon="ui-icon ui-icon-close"
								actionListener="#{createTravelReimbursementBean.discardNewExpenseDetails}"
								title="Discard expense details" update="@form" />
						</h:panelGroup>
					</h:panelGrid>

					<h:panelGrid id="newExpenseForm"
						rendered="#{createTravelReimbursementBean.SHOW_NEW_EXPENSE_FORM}"
						style="background-color: white; width: 100%; margin-top: 1px; border: 1px solid #d9d9d9;"
						columns="1" columnClasses="gridCellTopLeftAligned">

						<h:panelGrid columns="4" style="margin-bottom: -10px; "
							cellspacing="8"
							columnClasses="travelExpenseGridLabel, formLabelSimpleCell, formLabelSimpleCell, gridCellTopRightAligned">
							<h:outputLabel value="Expense Type" />
							<h:outputText value=":" />
							<h:panelGroup>
								<p:selectOneMenu id="expenseType" style="width:160px;"
									value="#{createTravelReimbursementBean.SELECTED_EXPENSE_TYPE}">
									<f:selectItems
										value="#{createTravelReimbursementBean.expenseTypesMap}" />
									<p:ajax event="change"
										listener="#{createTravelReimbursementBean.expenseTypeChanged}"
										update="@form" />
								</p:selectOneMenu>
								<p:watermark for="expenseType" value="Select Expense type" />
							</h:panelGroup>


						</h:panelGrid>


						<h:panelGrid id="transportExpenseEntryForm" columns="6"
							rendered="#{createTravelReimbursementBean.SELECTED_EXPENSE_TYPE eq 'Transport Expense'}"
							cellspacing="8" style="width: 100%;  "
							columnClasses="travelExpenseGridLabel, formLabelSimpleCell, formLabelSimpleCell, travelExpenseGridLabel">

							<h:outputText value="#{msg['date.label']}" />
							<h:outputText value=":" />
							<p:calendar id="transport"
								value="#{createTravelReimbursementBean.transportExpense.transportDate}"
								pattern="dd-MMM-yyyy" />

							<h:outputText value="Travel From" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.transportExpense.transportFrom}" />

							<h:outputText value="Travel To" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.transportExpense.transportTo}" />

							<h:outputText value="Travel Mode" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.transportExpense.transportMode}"
								style="width: 160px;">
								<f:selectItems
									value="#{createTravelReimbursementBean.travelModeMap}" />
							</p:selectOneMenu>

							<h:outputText value="Amount" />
							<h:outputText value=":" />
							<p:inputText id="TransportationExpenseAmount"
								value="#{createTravelReimbursementBean.transportExpense.transportAmount}"
								maxlength="5" />

							<h:outputText value="Currency" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.transportExpense.transportCurrency}"
								style="width: 160px;">
								<f:selectItems
									value="#{createTravelReimbursementBean.currencyMap}" />
							</p:selectOneMenu>

							<h:outputText value="Bill Attached" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.transportExpense.transportBillAttached}"
								style="width: 160px;">
								<f:selectItem itemLabel="Yes" itemValue="Yes" />
								<f:selectItem itemLabel="No" itemValue="No" />
							</p:selectOneMenu>



						</h:panelGrid>

						<h:panelGrid columns="6" cellspacing="8"
							rendered="#{createTravelReimbursementBean.SELECTED_EXPENSE_TYPE eq 'Lodging Expense'}"
							columnClasses="travelExpenseGridLabel, formLabelSimpleCell, formLabelSimpleCell, travelExpenseGridLabel"
							style="width: 100%">
							<h:outputText value="#{msg['date.label']}" />
							<h:outputText value=":" />
							<p:calendar id="lodging"
								value="#{createTravelReimbursementBean.lodgingExpense.lodgingDate}"
								pattern="dd-MMM-yyyy" />

							<h:outputText value="Hotel Name" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.lodgingExpense.lodgingHotel}" />

							<h:outputText value="Place" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.lodgingExpense.lodgingPlace}" />

							<h:outputText value="Amount" />
							<h:outputText value=":" />
							<p:inputText id="LodgingExpenseAmount"
								value="#{createTravelReimbursementBean.lodgingExpense.lodgingAmount}"
								maxlength="5" />

							<h:outputText value="Currency" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.lodgingExpense.lodgingCurrency}"
								style="width: 160px;">
								<f:selectItems
									value="#{createTravelReimbursementBean.currencyMap}" />
							</p:selectOneMenu>

							<h:outputText value="Bill Attached" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.lodgingExpense.lodgingBillAttached}"
								style="width: 160px;">
								<f:selectItem itemLabel="Yes" itemValue="Yes" />
								<f:selectItem itemLabel="No" itemValue="No" />
							</p:selectOneMenu>

							<h:inputHidden />
							<h:inputHidden />

							<h:panelGroup>
								<p:commandButton value="Add"
									actionListener="#{createTravelReimbursementBean.addLodgingExpenseDetailsAction}"
									update="@form" />
								<p:commandButton value="Reset"
									actionListener="#{createTravelReimbursementBean.resetLodgingExpenseDetailsAction}"
									ajax="false" />
							</h:panelGroup>
						</h:panelGrid>


						<h:panelGrid columns="6" cellspacing="8"
							rendered="#{createTravelReimbursementBean.SELECTED_EXPENSE_TYPE eq 'Boarding Expense'}"
							style="width: 100%; "
							columnClasses="travelExpenseGridLabel, formLabelSimpleCell, formLabelSimpleCell, travelExpenseGridLabel">

							<h:outputText value="#{msg['date.label']}" />
							<h:outputText value=":" />
							<p:calendar id="bording"
								value="#{createTravelReimbursementBean.boardingExpense.boardingDate}"
								pattern="dd-MMM-yyyy" />

							<h:outputText value="Hotel Name" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.boardingExpense.boardingHotel}" />

							<h:outputText value="Place" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.boardingExpense.boardingPlace}" />

							<h:outputText value="Amount" />
							<h:outputText value=":" />
							<p:inputText id="BordingExpenseAmount"
								value="#{createTravelReimbursementBean.boardingExpense.boardingAmount}"
								maxlength="5" />

							<h:outputText value="Currency" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.boardingExpense.boardingCurrency}"
								style="width: 160px;">
								<f:selectItems
									value="#{createTravelReimbursementBean.currencyMap}" />
							</p:selectOneMenu>

							<h:outputText value="Bill Attached" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.boardingExpense.boardingBillAttached}"
								style="width: 160px;">
								<f:selectItem itemLabel="Yes" itemValue="Yes" />
								<f:selectItem itemLabel="No" itemValue="No" />
							</p:selectOneMenu>

							<h:inputHidden />
							<h:inputHidden />

							<h:panelGroup>
								<p:commandButton value="Add"
									actionListener="#{createTravelReimbursementBean.addbordingExpenseDetailsAction}"
									update="@form" />
								<p:commandButton value="Reset"
									actionListener="#{createTravelReimbursementBean.resetbordingExpenseDetailsAction}"
									ajax="false" />
							</h:panelGroup>
						</h:panelGrid>

						<h:panelGrid columns="6" cellspacing="8"
							rendered="#{createTravelReimbursementBean.SELECTED_EXPENSE_TYPE eq 'Miscellaneous Expense'}"
							style="width: 100%; "
							columnClasses="travelExpenseGridLabel, formLabelSimpleCell, formLabelSimpleCell, travelExpenseGridLabel">

							<h:outputText value="#{msg['date.label']}" />
							<h:outputText value=":" />
							<p:calendar id="perdiem"
								value="#{createTravelReimbursementBean.travelMiscExpense.expenseDate}"
								pattern="dd-MMM-yyyy" />

							<h:outputText value="Bill Descriptio/Bill of" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.travelMiscExpense.billDesc}" />

							<h:outputText value="Bill no" />
							<h:outputText value=":" />
							<p:inputText
								value="#{createTravelReimbursementBean.travelMiscExpense.billNo}" />

							<h:outputText value="Amount" />
							<h:outputText value=":" />
							<p:inputText id="MiscellaneousExpenseAmount"
								value="#{createTravelReimbursementBean.travelMiscExpense.travelMiscExpenseAmount}"
								maxlength="5" />

							<h:outputText value="Currency" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.travelMiscExpense.travelMiscExpensecurrency}"
								style="width: 160px;">
								<f:selectItems
									value="#{createTravelReimbursementBean.currencyMap}" />
							</p:selectOneMenu>

							<h:outputText value="Bill Attached" />
							<h:outputText value=":" />
							<p:selectOneMenu
								value="#{createTravelReimbursementBean.travelMiscExpense.billAttached}"
								style="width: 160px;">
								<f:selectItem itemLabel="Yes" itemValue="Yes" />
								<f:selectItem itemLabel="No" itemValue="No" />
							</p:selectOneMenu>

							<h:inputHidden />
							<h:inputHidden />

							<h:panelGroup>
								<p:commandButton value="Add"
									actionListener="#{createTravelReimbursementBean.addTravelMiscExpenseDetailsAction}"
									update="@form" />
								<p:commandButton value="Reset"
									actionListener="#{createTravelReimbursementBean.resetTravelMiscExpenseDetailsAction}"
									ajax="false" />
							</h:panelGroup>
						</h:panelGrid>

					</h:panelGrid>

					<h:panelGrid style="width: 100%">
						<h:outputText value="Transportation Expenses"
							rendered="#{createTravelReimbursementBean.transportExpensesDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="transportExpenses"
							rendered="#{createTravelReimbursementBean.transportExpensesDetailsList.size() ne 0}"
							value="#{createTravelReimbursementBean.transportExpensesDetailsList}"
							var="transportDetails"
							binding="#{createTravelReimbursementBean.transportDetailsTable}">

							<p:column headerText="#{msg['date.label']}" style="width: 80px;">
								<h:outputText value="#{transportDetails.transportDate}">
									<f:convertDateTime pattern="dd-MMM-yyyy"
										timeZone="#{createTravelReimbursementBean.timeZone}" />
								</h:outputText>
							</p:column>

							<p:column headerText="Source - Destination">
								<h:outputText
									value="#{transportDetails.transportFrom} - #{transportDetails.transportTo} (By #{transportDetails.transportMode})" />
							</p:column>
							<p:column headerText="Amount"
								style="width: 80px; text-align:right">
								<h:outputText value="#{transportDetails.transportAmount}" />
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{transportDetails.transportCurrency}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{transportDetails.transportCurrency}"
											style="width: 136px;">
											<f:selectItems
												value="#{createTravelReimbursementBean.currencyMap}" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>


							<p:column headerText="Bill Attached" style="width: 60px">
								<h:outputText value="#{transportDetails.transportBillAttached}" />
							</p:column>

							<p:column style="text-align: center; width: 30px;">
								<p:commandButton icon="ui-icon-close" title="Remove from list"
									actionListener="#{createTravelReimbursementBean.removeTransportDetails}"
									style="padding: 0" update="@form" />
							</p:column>
						</p:dataTable>




						<h:outputText value="Lodging Expenses"
							rendered="#{createTravelReimbursementBean.lodgingExpenseDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="lodgingExpenses"
							rendered="#{createTravelReimbursementBean.lodgingExpenseDetailsList.size() ne 0}"
							value="#{createTravelReimbursementBean.lodgingExpenseDetailsList}"
							var="lodgingExpenses"
							binding="#{createTravelReimbursementBean.lodgingDetailsTable}">

							<p:column headerText="#{msg['date.label']}" style="width: 80px;">
								<h:outputText value="#{lodgingExpenses.lodgingDate}">
									<f:convertDateTime pattern="dd-MMM-yyyy"
										timeZone="#{createTravelReimbursementBean.timeZone}" />
								</h:outputText>

							</p:column>

							<p:column headerText="Hotel">
								<h:outputText
									value="#{lodgingExpenses.lodgingHotel}, #{lodgingExpenses.lodgingPlace}" />

							</p:column>


							<p:column headerText="Amount"
								style="width: 80px; text-align: right;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{lodgingExpenses.lodgingAmount}"
											maxlength="5" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{lodgingExpenses.lodgingAmount}" size="7"
											maxlength="5" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{lodgingExpenses.lodgingCurrency}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{lodgingExpenses.lodgingCurrency}"
											style="width: 136px;">
											<f:selectItems
												value="#{createTravelReimbursementBean.currencyMap}" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

							<!--  <p:column headerText="Amount(INR)">		                	
		                <p:cellEditor>  	
			                <f:facet name="output"> 
			                	<h:outputText value="#{lodgingExpenses.lodgingAmountINR}" maxlength="5"/>  
			                </f:facet>  
			                <f:facet name="input">  
			                	<p:inputText value="#{lodgingExpenses.lodgingAmountINR}" size="7" maxlength="5"/>  
			                </f:facet>  
					   </p:cellEditor> 		
		            </p:column> -->

							<p:column headerText="Bill Attached" style="width: 60px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{lodgingExpenses.lodgingBillAttached}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu
											value="#{lodgingExpenses.lodgingBillAttached}">
											<f:selectItem itemLabel="Yes" itemValue="Yes" />
											<f:selectItem itemLabel="No" itemValue="No" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

							<!-- <p:column headerText="EDIT" style="width:50px">  
			            <p:rowEditor />  
			        </p:column>   -->

							<p:column style="text-align: center; width: 30px;">
								<p:commandButton icon="ui-icon-close" title="Remove from list"
									actionListener="#{createTravelReimbursementBean.removeLodgingDetails}"
									style="padding: 0;" update="@form" />
							</p:column>
						</p:dataTable>



						<h:outputText value="Boarding Expenses"
							rendered="#{createTravelReimbursementBean.boardingExpenseDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="boardingExpenses"
							rendered="#{createTravelReimbursementBean.boardingExpenseDetailsList.size() ne 0}"
							value="#{createTravelReimbursementBean.boardingExpenseDetailsList}"
							var="boardingExpense"
							binding="#{createTravelReimbursementBean.bordingDetailsTable}">

							<p:column headerText="#{msg['date.label']}" style="width: 80px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingDate}">
											<f:convertDateTime pattern="dd-MMM-yyyy"
												timeZone="#{createTravelReimbursementBean.timeZone}" />
										</h:outputText>
									</f:facet>
									<f:facet name="input">
										<p:calendar value="#{boardingExpense.boardingDate}" size="9" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Hotel">
								<h:outputText
									value="#{boardingExpense.boardingHotel}, #{boardingExpense.boardingPlace}" />
							</p:column>

							<p:column headerText="Amount"
								style="width: 80px; text-align: right">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingAmount}"
											maxlength="5" />
									</f:facet>
									<f:facet name="input">
										<p:inputText value="#{boardingExpense.boardingAmount}"
											size="7" maxlength="5" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingCurrency}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{boardingExpense.boardingCurrency}"
											style="width: 136px;">
											<f:selectItems
												value="#{createTravelReimbursementBean.currencyMap}" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

							<!--  <p:column headerText="Amount(INR)"> 		                
		                <p:cellEditor>  	
			                <f:facet name="output"> 			                	
		              		 	<h:outputText value="#{boardingExpense.boardingAmountINR}" maxlength="5"/>
			                </f:facet>  
			                <f:facet name="input">  
			                	<p:inputText value="#{boardingExpense.boardingAmountINR}" size="7" maxlength="5"/>  
			                </f:facet>  
					   </p:cellEditor>  
		            </p:column>   -->

							<p:column headerText="Bill Attached" style="width: 60px;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{boardingExpense.boardingBillAttached}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu
											value="#{boardingExpense.boardingBillAttached}">
											<f:selectItem itemLabel="Yes" itemValue="Yes" />
											<f:selectItem itemLabel="No" itemValue="No" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column style="text-align: center; width: 30px;">
								<p:commandButton icon="ui-icon-close" title="Remove from list"
									actionListener="#{createTravelReimbursementBean.removeBordingDetails}"
									style="padding: 0" update="@form" />
							</p:column>
						</p:dataTable>

						<h:outputText value="Perdiem/Incidental/Miscellaneous Expenses"
							rendered="#{createTravelReimbursementBean.travelMiscExpenseDetailsList.size() ne 0}"
							styleClass="outputTextPanelSubTitle" />
						<p:dataTable id="miscExpenses"
							rendered="#{createTravelReimbursementBean.travelMiscExpenseDetailsList.size() ne 0}"
							value="#{createTravelReimbursementBean.travelMiscExpenseDetailsList}"
							var="travelMiscExpense"
							binding="#{createTravelReimbursementBean.travelMiscDetailsTable}">

							<p:column headerText="#{msg['date.label']}" style="width: 80px;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{travelMiscExpense.expenseDate}">
											<f:convertDateTime pattern="dd-MMM-yyyy"
												timeZone="#{createTravelReimbursementBean.timeZone}" />
										</h:outputText>
									</f:facet>
									<f:facet name="input">
										<p:calendar value="#{travelMiscExpense.expenseDate}" size="9" />
									</f:facet>
								</p:cellEditor>
							</p:column>

							<p:column headerText="Bill Description">
								<h:outputText
									value="#{travelMiscExpense.billNo} - #{travelMiscExpense.billDesc}" />
							</p:column>
							<p:column headerText="Amount"
								style="width: 80px; text-align: right">
								<h:outputText
									value="#{travelMiscExpense.travelMiscExpenseAmount}" />
							</p:column>

							<p:column headerText="Currency" style="width: 30px">
								<h:outputText
									value="#{travelMiscExpense.travelMiscExpensecurrency}" />
							</p:column>

							<p:column headerText="Bill Attached" style="width: 60px;">
								<p:cellEditor>
									<f:facet name="output">
										<h:outputText value="#{travelMiscExpense.billAttached}" />
									</f:facet>
									<f:facet name="input">
										<p:selectOneMenu value="#{travelMiscExpense.billAttached}">
											<f:selectItem itemLabel="Yes" itemValue="Yes" />
											<f:selectItem itemLabel="No" itemValue="No" />
										</p:selectOneMenu>
									</f:facet>
								</p:cellEditor>
							</p:column>

							<!-- <p:column headerText="EDIT" style="width:50px">  
			            <p:rowEditor />  
			        </p:column>   -->
							<p:column style="text-align: center; width: 30px;">
								<p:commandButton icon="ui-icon-close" title="Remove from list"
									actionListener="#{createTravelReimbursementBean.removeTravelMiscDetails}"
									style="padding: 0" update="@form" />
							</p:column>
						</p:dataTable>

						<h:outputText value="Expenses report summary total"
							styleClass="outputTextSubTitle" style="float: right;"
							 />
						<p:dataGrid value="#{createTravelReimbursementBean.currencies}" style=""
							emptyMessage="00.00"
							var="currency" columns="1">
							<p:column style="">
								<h:panelGrid columnClasses="gridCellBottomRightAligned, currencyGridCell" columns="2" style="width: 400px; float: right;">
									<h:outputText value="#{currency.amount}" />
									<h:outputText value="#{currency.currency}" />
								</h:panelGrid>
								
							</p:column>							

						</p:dataGrid>

						<h:panelGrid columns="2" style="float: right; margin-right: -2px;" columnClasses="gridCellBottomRightAligned,, gridCellBottomRightAligned,"> 
							<h:outputText value="Advance Taken" styleClass="outputTextSubTitle"  />
							<p:commandLink styleClass="ui-icon ui-icon-plus" title="Add advance" style="border: 1px solid #d9d9d9; -moz-border-radius: 3px; -webkit-border-radius: 3px;	border-radius: 3px;"   
										update="@form" actionListener="#{createTravelReimbursementBean.showNewCurrencyPanel}" rendered="#{not createTravelReimbursementBean.SHOW_NEW_CURRENCY_FORM}"/>
						</h:panelGrid>
						
						<h:panelGrid id="newAdvanceForm" style="border: 1px solid #d9d9d9; padding: 2px; float: right; background-color: #ffffff" columns="5" columnClasses="gridCellMiddleLeftAligned,gridCellBottomLeftAligned, gridCellBottomLeftAligned, gridCellBottomLeftAligned, gridCellBottomLeftAligned"
								rendered="#{createTravelReimbursementBean.SHOW_NEW_CURRENCY_FORM}">  
								<h:outputText value="Enter advance amount:" />
								<p:inputText style="width: 80px;" value="#{createTravelReimbursementBean.newTravelExpenseAmount.amount}"></p:inputText>
							
								<p:selectOneMenu style="width: 80px; margin-bottom: -2px;" value="#{createTravelReimbursementBean.newTravelExpenseAmount.currency}">       
									<f:selectItems value="#{createTravelReimbursementBean.currencyMap}" />  							
								</p:selectOneMenu>
								<p:commandButton id="Advance" icon="ui-icon ui-icon-check" actionListener="#{createTravelReimbursementBean.addAdvanceAmount}" update="@form">
								</p:commandButton>
								<p:commandButton icon="ui-icon ui-icon-close" update="@form">
									<f:setPropertyActionListener target="#{createTravelReimbursementBean.SHOW_NEW_CURRENCY_FORM}" value="false" />
								</p:commandButton>
							
						</h:panelGrid>
						 
						<p:dataGrid columns="1" style="border-right: 1px solid #d9d9d9; " emptyMessage="" 
							value="#{createTravelReimbursementBean.travelExpenseAmounts}" 
							var="currency" >
							<p:column > 
								<h:panelGrid columns="3" style="margin-right: -7px;  width: 150px; float: right; " columnClasses="gridCellBottomRightAligned, currencyGridCell, buttonGridCell">    
									<h:outputText value="#{currency.amount}" >
										<f:convertNumber maxFractionDigits="2" minFractionDigits="2"/>
									</h:outputText>
									<h:outputText value="#{currency.currency}" />
									<p:commandLink styleClass="ui-icon ui-icon-minus" title="Remove" style="border: 1px solid #d9d9d9; -moz-border-radius: 3px; -webkit-border-radius: 3px;	border-radius: 3px; float: right;" actionListener="#{createTravelReimbursementBean.removeAdvanceAmount}" update="@form" >
										<f:attribute name="advance" value="#{currency}" />										
									</p:commandLink>
								</h:panelGrid>								
							</p:column>							
						</p:dataGrid>
					 
					</h:panelGrid>

				</p:panel>


				<h:panelGroup style="float:right;">
					<p:commandButton value="Create"
						actionListener="#{createTravelReimbursementBean.confirmationAction}"
						update="@form" />
					<p:commandButton value="Reset" action="createtravelreimbursement" />
					<p:commandButton value="Back" onclick="history.back();"
						rendered="#{viewRRFByReportingManagerBean.renderBackButton}" />
				</h:panelGroup>


			</h:panelGrid>
			<p:confirmDialog widgetVar="confirmation" id="confirmation"
				severity="alert"
				message="This will submit your travel expense request. Proceed?">
				<h:panelGroup style="text-align: right; float: right;">
					<p:commandButton value="Yes, Submit Now"
						action="#{createTravelReimbursementBean.saveTravelExpenseRequest}"
						update="@form" oncomplete="confirmation.hide()" />
					<p:commandButton id="decline" value="Not Yet"
						onclick="confirmation.hide()" type="button" />
				</h:panelGroup>
			</p:confirmDialog>

		</h:form>
	</ui:define>
</ui:composition>